<template>
  <div>
    <div class="friendhtml">
      <!-- 顶部 -->
      <mt-header class="friends-header" title="好友列表" fixed></mt-header>
      <!-- 主体内容 -->
      <div class="friends-main">
        <div>
          <!-- 添加好友项 -->
          <router-link to="/addfriend">
            <div class="addfriend">
              <span class="addicon">
                <span><van-icon name="add-o" /> </span>
              </span>
              <span class="addtext">
                <span>添加好友</span>
              </span>
            </div>
          </router-link>
          <!-- 好友列表标题 -->
          <div class="friendlist-title">我的好友</div>
          <div class="scroll" v-if="friends">
            <!-- 好友列表 -->
            <div class="friendlist" v-for="f in friends" :key="f.id">
              <div class="usericon">
                <img :src="imgBase + f.avatarUrl" alt="" />
              </div>
              <span class="username">
                <span>{{ f.username }}</span>
                <span class="del">
                  <van-button @click="del(f.id)">删除</van-button>
                </span>
              </span>
            </div>
          </div>

          <div style="height: 8vh"></div>
        </div>
      </div>
      <!-- 底部 -->
      <van-tabbar class="footer" v-model="activeFooter">
        <van-tabbar-item icon="home-o" @click="index">首页</van-tabbar-item>
        <van-tabbar-item icon="chat-o" @click="msg">关注</van-tabbar-item>
        <van-tabbar-item icon="friends-o" @click="friend">好友</van-tabbar-item>
        <van-tabbar-item icon="user-o" @click="mine">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgBase: "http://101.42.154.211:8080/qyj",
      id: "",
      activeFooter: 2,
      // active: 0,
      selected: "1",
      // 好友列表
      friends: [],
    };
  },
  mounted() {
    //获取好友列表
    this.id = this.$store.state.id;
    let url = `/op/friendDo/getFriendList?userId=${this.id}`;
    //console.log("好友列表加载完成");

    this.axios
      .get(url, {
        "Context-Type": "application/json",
        headers: { accesstoken: this.$store.state.accesstoken },
      })
      .then((res) => {
        this.friends = res.data.data;
        //console.log(res.data);
      });
  },
  methods: {
    // 删除好友操作,ID获取用户唯一编号
    del(ID) {
      //   删除用户提示框
      let friendId = ID;
      this.$dialog
        .confirm({
          title: "",
          message: "是否删除此用户",
          confirmButtonColor: "red",
        })
        .then(() => {
          //axios请求
          let urls = `/op/friendDo/delFriend?userId=${this.id}&friendId=${friendId}`;
          this.axios
            .get(urls, {
              "Context-Type": "application/json",
              headers: { accesstoken: this.$store.state.accesstoken },
            })
            .then((res) => {
              // 获取好友ID所在位置下标删除好友
              var index = this.friends.map((item) => item.id).indexOf(friendId);
              this.friends.splice(index, 1);
              //console.log(res.data);
            });
        })
        .catch(() => {});
    },

    index() {
      if (this.$route.path == "/index") return;
      this.$router.push("/index");
    },
    msg() {
      if (this.$route.path == "/msg") return;
      this.$router.push("/msg");
    },
    friend() {
      if (this.$route.path == "/friend") return;
      this.$router.push("/friend");
    },
    mine() {
      if (this.$route.path == "/mine") return;
      this.$router.push("/mine");
    },
  },
};
</script>

<style lang="scss" scoped>
.friendhtml {
  overflow-x: hidden;
}
* {
  margin: 0;
  padding: 0;
}

// 顶部样式
.friends-header {
  height: 6vh;
  font-size: 4.5vw;
  color: rgb(231, 36, 10);
  background-color: rgba(245, 212, 169);
}
// 主体样式
.friends-main {
  min-height: 88vh;
  font-size: 4.6vw;
  color: #b86e43;
  background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
  // 添加好友项样式
  .addfriend {
    color: #df9425;
    display: flex;
    width: 100vw;
    height: 8vh;
    margin-top: 6vh;
    .addicon {
      font-size: 5.5vw;
      width: 16vw;
      height: 8vh;
      line-height: 8vh;
      text-align: center;
      span {
        margin: 0 auto;
        width: 10vw;
        height: 5vh;
        border-radius: 5px;
      }
    }

    .addtext {
      height: 8vh;
      line-height: 8vh;
      width: 84vw;
      border-bottom: 1px gainsboro solid;
    }
  }

  //   好友列表标题样式
  .friendlist-title {
    font-size: 0.8rem;
    width: 100vw;
    height: 4vh;
    line-height: 4vh;
    padding-left: 4vw;
    color: rgb(56, 55, 55);
    background-color: rgb(236, 222, 206);
  }

  .scroll {
    //   好友列表样式
    .friendlist {
      width: 100vw;
      height: 8vh;
      line-height: 8vh;
      display: flex;
      font-size: 4vw;
      .usericon {
        position: relative;
        width: 16vw;
        height: 8vh;
        // 图片居中
        img {
          position: absolute;
          width: 12vw;
          height: 6vh;
          left: 50%;
          top: 50%;
          margin-top: -3vh;
          margin-left: -6vw;
          border-radius: 1.2vw;
        }
      }
    }
    //用户名和删除框
    .username {
      width: 80vw;
      height: 8vh;
      border-bottom: 1px gainsboro solid;
      .del {
        display: block;
        float: right;
        width: 18vw;
        position: relative;

        button {
          position: absolute;
          top: 1.5vh;
          display: block;
          line-height: 5vh;
          font-size: 2vh;
          background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
          color: #fff;
          width: 15vw;
          height: 5vh;
          border-radius: 2vw;
        }
      }
    }
  }
}
// 底部导航
.footer {
  background-color: rgba(245, 212, 169);
}
.van-tabbar-item--active {
  background-color: rgba(245, 212, 169);
  color: rgb(233, 109, 51);
}
</style>
